<template>
  <div id="div-dashboard">
    <el-row :gutter="10" style="margin-bottom: 10px;margin-top: 20px;margin-left: 20px;">
      <el-col :span="10" style="margin-right: 60px;"><div class="echarts-bar" :style="{ width: '100%', height: '34vh' }"></div></el-col>
      <el-col :span="10"><div class="echarts-line" :style="{ width: '100%', height: '34vh' }"></div></el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="10" style="margin-right: 60px;;margin-left: 20px;"><div class="echarts-pie" :style="{ width: '100%', height: '34vh' }"></div></el-col>
      <el-col :span="10"><div class="echarts-bar1" :style="{ width: '100%', height: '34vh' }"></div></el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'

export default {
  name: 'dashboard-A100406',
  data () {
    const self = this
    return {
      center: [121.59996, 31.197646],
      lng: 0,
      lat: 0,
      loaded: false,
      plugin: [
        {
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 100, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 0, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
          extensions: 'all',
          pName: 'Geolocation',
          events: {
            init (o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                console.log(result)
                if (result && result.position) {
                  self.lng = result.position.lng
                  self.lat = result.position.lat
                  self.center = [self.lng, self.lat]
                  self.loaded = true
                  self.$nextTick()
                }
              })
            }
          }
        }
      ],
      data: ['在线网关', '离线网关', '闭合断路器', '断开断路器', '离线断路器'],
      option1: {
        title: {
          text: '柱状图',
          subtext: '',
          x: 'left'
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      },
      option2: {
        title: {
          text: '散点图',
          subtext: '',
          x: 'left'
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 20,
            data: [[10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33], [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82], [5.0, 5.68]],
            type: 'scatter'
          }
        ]
      },
      option3: {
        title: {
          text: '饼图1',
          subtext: '',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          selected: {}
        },
        series: [
          {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },

      option4: {
        title: {
          text: '饼图2',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '设备数量',
            type: 'pie', // bar,line,pie
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      }
    }
  },
  async mounted () {
    // 基于准备好的dom，初始化echarts实例
    let myChart1 = echarts.init(document.querySelector('.echarts-bar'))
    // 绘制图表
    myChart1.setOption(this.option1)

    // 基于准备好的dom，初始化echarts实例
    let myChart2 = echarts.init(document.querySelector('.echarts-line'))
    // 绘制图表
    myChart2.setOption(this.option2)

    // 基于准备好的dom，初始化echarts实例
    let myChart3 = echarts.init(document.querySelector('.echarts-pie'))
    // 绘制图表
    myChart3.setOption(this.option3)

    // 基于准备好的dom，初始化echarts实例
    let myChart4 = echarts.init(document.querySelector('.echarts-bar1'))
    // 绘制图表
    myChart4.setOption(this.option4)
  }
}
</script>
<style>
.box-card {
  width: 480px;
}
.el-card__header {
  color: #303133;
  font-size: 18px;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding: 10px 14px;
}
</style>
